<template>
	<view>
		<uni-nav-bar fixed left-icon="back" title="钱包中心"></uni-nav-bar>

		<view class="ui-top-bgd">
			<view class="ui-num">
				<view>
					<view>总金额(元)</view>
					<view class="ui-money" >{{userInfo.walletBalance || 0}}</view>
				</view>
				<view class="t_btn" @tap="clickRight">去充值</view>
			</view>
		</view>
		<view class="text">
			<text>充值明细</text>
		</view>

		<view class="ui-row-center">
			<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box">
				<view class="tui-flex" v-for="(item, index) in list" :key="index">
					<view class="flex-left">
						<view class="title">订单编号: {{item.orderNo}}</view>
						<view class="time">{{item.createTime}}</view>
					</view>
					<view class="flex-right">+ {{item.actAmount}}
						<text class="yuan">元</text>
					</view>
				</view>
			</scroll-view>
			<!--<view class="tui-tail">
				<text>没有更多了</text>
			</view>-->
			<empty v-if="!list.length"></empty>
			<view v-if="list.length" class="cu-load text-gray" :class="loadStatus"></view>
		</view>

		<!-- 登录提示 -->
		<uni-login-model></uni-login-model>
	</view>
</template>
<script>
    import uniLoginModel from '@/components/uni-login-model/uni-login-model.vue'
    import { mapMutations, mapActions, mapState } from 'vuex'
    import empty from '@/components/empty/index.vue'

	export default {
		components: {
            uniLoginModel, empty
		},
		data() {
			return {
				list: [],
				money: '',
                listQuery: {
				    pageNum: 1,
					pageSize: 10,
                    productType: 3
				},
                lastPage: 1,
                loadStatus: ''
			}
		},
        computed: {
            ...mapState({
                userInfo: state => state.user.userInfo
            })
        },
        onReachBottom() {
            if (this.listQuery.pageNum < this.lastPage) {
                this.listQuery.pageNum += 1
                this.getList()
            }
        },
		onLoad(options) {
			this.money = options.money
			this.getList()
		},
		methods: {
			getList() {
                let that = this
                that.loadStatus = 'loading'
                uni.showLoading({title: ''})
                that.listQuery = {
					...that.listQuery,
                    pageNum: that.listQuery.pageNum
				}
                that.$api.api('platformserial', that.listQuery).then(res => {
					/*if (res.code == 200) {
                        that.list = res.data.list
					} else {
                        uni.showToast({title: res.message, icon: 'none'})
					}*/
                    if (res.code == 200) {
                        // that.list = res.data.list
                        res.data.list.forEach(item=>{
                            that.list.push(item);
                        })
                        that.lastPage = res.data.totalPage
                        if (that.listQuery.pageNum < res.data.totalPage) {
                            that.loadStatus = ''
                        } else {
                            that.loadStatus = 'over'
                        }
                    } else {
                        this.$api.msg(res.message)
                    }
                    uni.hideLoading();
				}).catch(error => {
                    uni.hideLoading();
                    this.$api.msg(error.message)
				})
			},
            //	加载更多
            loadMore() {
                if (this.listQuery.pageNum < this.lastPage) {
                    this.listQuery.pageNum += 1
                    this.getList()
                }
            },
            clickRight() {
                uni.navigateTo({
                    url: '/pages/my/components/topUp'
                })
            }
		}
	}
</script>
<style lang="scss" scoped>
.ui-top-bgd {
	background: #6CB041;
	height: 300rpx;
	.ui-num {
		padding: 60rpx 40rpx 0;
		color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.ui-money {
			font-size: 44rpx;
			font-weight: 500;
		}
		.t_btn {
			border: 4rpx solid #fff;
			border-radius: 40rpx;
			padding: 6rpx 30rpx 10rpx;
			font-size: 34rpx;
		}
	}
}
.text {
	padding: 20rpx;
	background: #fff;
	font-size: 34rpx;
	text-align: center;
}
.ui-row-center {
	margin-top: 30rpx;
	.tui-flex {
		padding: 30rpx;
		background: #fff;
		border-bottom: 2rpx  solid #eee;
		.flex-left {
			flex: 1;
			text-align: left;
			line-height: 1.5;
			.title {
				font-size: 34rpx;
				color: #000000;
			}
			.time {
				color: #999;
			}
		}
		.flex-right {
			text-align: right;
			font-size: 36rpx;
			color: #3cc51f;
			.yuan {
				color: #999;
				font-size: 24rpx;
				padding-left: 10rpx;
			}
		}
	}
}
.button {
	background: #3cc51f;
	color: #fff;
}
</style>